<template>
    <template v-if="inited">
        <swiper v-if="station.pics && station.pics.length > 0" :indicator-dots="true">
            <swiper-item v-for="(pic, i) in station.pics" :key="i">
                <NetImage class="pic" mode="widthFix" :src="pic" />
            </swiper-item>
        </swiper>
        <view class="m-t-20 p-l-r">
            <view class="module">
                <view class="flex-align-items-center">
                    <view class="name">{{ station.name }}</view>
                    <view class="m-l-30 nav" @tap="nav">
                        <LocalImage class="icon" src="nav.png" />
                        <text v-if="distance < 0.1">{{ '<' }} 100m</text>
                        <text v-else>{{ distance }}km</text>
                    </view>
                </view>
                <view class="labels" v-if="station.labels && station.labels.length > 0">{{ station.labels.join(' | ') }}</view>
                <view class="m-t-10">{{ station.address }}</view>
            </view>
            <view class="m-t-20 module" v-if="fastPricing && fastPricing.rules">
                <view class="title">快充收费标准</view>
                <view class="body">
                    <view class="table">
                        <view class="tr">
                            <view class='th'>收费时段</view>
                            <view class='th'>优惠价(元/度)</view>
                            <view class='th'>=</view>
                            <view class='th'>电费</view>
                            <view class='td'>+</view>
                            <view class='th'>服务费</view>
                        </view>
                        <view v-for="(rule, i) in fastPricing.rules" class="tr" :key="i" :class="{current : rule.current == true}">
                            <view class='td'><view v-if="rule.current == true" class="flag">当前价</view>{{rule.time[0]}}-{{rule.time[1]}}</view>
                            <view class='td'>{{ Number((rule.price + rule.service).toFixed(2)) }}</view>
                            <view class='td'></view>
                            <view class='td'>{{ Number(rule.price) }}</view>
                            <view class='td'></view>
                            <view class='td'>{{ Number(rule.service) }}</view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="m-t-20 module">
                <view class="title">慢充收费标准</view>
                <view class="body">
                    <view class="detail">
                        <view class="item">
                            <view>电价</view>
                            <view class="m-t-10 amount">30元/度</view>
                        </view>
                        <view class="item">
                            <view>服务费</view>
                            <view class="m-t-10 amount">20元/度</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </template>
    
    <LoadingPage v-if="!inited" />
</template>

<script lang="ts" setup>
    import { stationApi } from '@/api/ChargingStation';
    import LocalImage from '@/components/LocalImage/index.vue'
    import { ref } from 'vue';
    import NetImage from '@/components/NetImage/index.vue'
import { distanceFromLatLonInKm, isWithinTimeRange } from '@/utils';
import { getLocation, openLocation, useRouter } from '@/utils/framework';
import { computed } from 'vue';

    const router = useRouter()
    const inited = ref(false)

    const mylongitude = ref(116.404269)
    const mylatitude = ref(39.915378)

    const station = ref<any>()
    const fastPricing = ref<any>()
    const slowPricing = ref<any>()

    const distance = computed(() => {
        if(station.value) {
            return Number(distanceFromLatLonInKm(mylongitude.value, mylatitude.value, station.value.longitude, station.value.latitude).toFixed(1))
        }

        return 0
    })

    stationApi(router.params.id).then(res => {
        if(res.data) {
            station.value = res.data.station
            if(res.data.fastPricing && res.data.fastPricing.rules) {
                let time = Math.floor((Date.now() / 1000))
                res.data.fastPricing.rules.forEach(rule => {
                    if(isWithinTimeRange(time, rule.time)) {
                        rule.current = true
                    }
                })
            }
            fastPricing.value = res.data.fastPricing
            slowPricing.value = res.data.slowPricing
        }

        inited.value = true
    })

    getLocation({
        type: 'gcj02',
        success (res) {
            mylongitude.value = res.longitude
            mylatitude.value = res.latitude
        }
    })

    function nav(){
        openLocation({
            longitude : station.value.longitude,
            latitude : station.value.latitude,
            name : station.value.name,
            address : station.value.address
        })
    }
</script>

<style lang="scss" src="./index.scss"></style>